<template>
  <div>
    <!-- 头部导航 -->
      <van-nav-bar  fixed>
    <template #left>
    <img class="logo" src="../../assets/toutiao_logo.png" alt="">
    </template>
    <template #right>
  <van-icon name="search"
  color="white"
  size="0.48rem"
  @click="$router.push({name:'Search'})"/>
    </template>
      </van-nav-bar>
      <!-- tab导航 -->
      <div class="tabs_content">
           <van-tabs v-model="active"
            sticky
            offset-top='1.22666667rem'>
  <van-tab v-for="obj in list"
   :key="obj.id"
   :title="obj.name"
   :name="obj.id">
    <van-pull-refresh
    v-model="isLoading"
    @refresh="onRefresh"
    loading-text='123' l>
     <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  >
    <ArtList :list="artlist" @removeA="removeFn"></ArtList>
     </van-list>
    </van-pull-refresh>
    </van-tab>
      </van-tabs>
      </div>
      <!-- 加号组件 -->
      <van-icon name="plus" size='0.37333333rem' class="moreChannels" @click="show=true"/>
      <!-- 弹出层组件 -->
<!-- close-on-click-overlay 是否在点击遮罩层后关闭（false 不关闭） -->
      <van-popup v-model="show" :close-on-click-overlay="false">
  <div class="popup-container">

    <!-- 弹出层的头部区域 -->
    <van-nav-bar title="频道管理">
      <template #right>
        <!-- 右上角x按钮点击关闭弹出层 -->
        <van-icon
        name="cross"
        size="14"
        color="white"
        @click="closeFn" />
      </template>
    </van-nav-bar>

    <!-- 弹出层的主体区域 -->
    <div class="pop-body">
      <ChannelEdit v-model="active"
      :list="list"
      :allList='allList'
      @updateChannel="updateChannleFn"
      ref="channel"
      @closePop="show=false"
      ></ChannelEdit>
    </div>
  </div>
      </van-popup>
      </div>
</template>

<script>
import { userChannelAPI, getArticleListAPI, disliekArticleAPI, reportsAPI, allChannelAPI, updateChannelAPI } from '@/api'
import ChannelEdit from './channelEdit'
import ArtList from './components/ArticleList'
import { Toast } from 'vant';
export default {
  data () {
    return {
      allList: [], // 所有频道
      active: 0, // tab选中导航索引值
      list: [], // 用户所选频道
      artlist: [], // 文章数据
      selchannelid: 0, // 选中的频道id(默认0)
      isLoading: false,
      loading: false,
      finished: false, // 控制是否还有更多数据
      page: 1, // 控制当前要第几页的数据
      show: false // 弹出层是否出现
    }
  },
  watch: {
    active () {
      this.selchannelid = this.active;
      this.artlist = [];
      this.page = 1;
      this.getArtList()
    }
  },
  components: {
    ArtList,
    ChannelEdit
  },
  async created () {
    const [, res] = await userChannelAPI()
    console.log(123);
    console.log(res);
    this.list = res.data.data.channels
    this.getArtList()

    // 获取所有频道数据
    const [, res2] = await allChannelAPI()
    console.log(res2);
    this.allList = res2.data.data.channels

    // const [, Artres] = await getArticleListAPI({
    //   channel_id: 0,
    //   timestamp: (new Date()).getTime().toString(),
    //   with_top: 1
    // })
    // console.log(Artres);
  },
  methods: {
    async getArtList () {
      const [, Artres] = await getArticleListAPI({
        channel_id: this.selchannelid,
        timestamp: (new Date()).getTime().toString(),
        with_top: 1,
        page: this.page
      })
      // Artres.data.data.results.forEach(obj => this.ArtList.push(obj))// 网络请求真正回来了
      this.artlist = [...this.artlist, ...Artres.data.data.results]
      this.isLoading = false
      this.loading = false
      Toast.clear()
    },
    onRefresh () {
      this.isLoading = false
      this.artlist = [] // 清空数组数据重新请求
      this.page = 1
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      });
      this.getArtList()
    },
    onLoad () {
      this.page++
      this.getArtList()
    },
    async removeFn (art_id, type) {
      // 删除文章
      const index = this.artlist.findIndex(obj => obj.art_id === art_id)
      this.artlist.splice(index, 1)
      // 到文章id匹配元素下标
      // type是否有值判断
      if (type === undefined) {
        await disliekArticleAPI({
          target: art_id
        })
      } else {
        await reportsAPI({
          target: art_id,
          type: type
        })
      }
      // 数据填补方案
      this.page = 1;
      // this.artlist = [];
      this.getArtList()
    },
    async updateChannleFn (userChannleList) {
      // console.log(userChannleList)
      let arr = JSON.parse(JSON.stringify(userChannleList))
      arr = arr.map((obj, index) => {
        delete obj.name
        obj.seq = index
        return obj
      })
      arr.splice(0, 1)
      console.log(arr)
      const [, res] = await updateChannelAPI({
        channels: arr
      })
      console.log(res)
    },
    closeFn () {
      this.show = false
      this.$refs.channel.isshow = false
    }
  }
}
</script>

<style scoped lang="less">
 .tabs_content{
      padding-top: 46px;
  }
  .logo{
      width: 115px;
      height: 37px;
  }
  // 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

// 弹出层容器宽度高度铺满屏幕
/*频道编辑弹出层 */
.van-popup{
  width: 100%;
  height: 100%;
}
// .edit_wrap {
//   width: 100%;
//   height: 100%;
// }
</style>
